<template>
  <div class="echart-dataZoom-inside">
    <FormItem
      :form="form"
      option="echart.dataZoom.inside.orient"
      :label="$demoi18n('panel.label.selectControlData')"
      type="select"
      :options="dataZoomOrients"
    />
    <FormItem
      :form="form"
      option="echart.dataZoom.inside.zoomOnMouseWheel"
      :label="$demoi18n('panel.label.howToTriggerWindowScaling')"
      type="select"
      :options="dataZoomZoomOnMouseWheels"
    />
    <FormItem
      :form="form"
      option="echart.dataZoom.inside.moveOnMouseMove"
      :label="$demoi18n('panel.label.howToTriggerWindowPanning')"
      type="select"
      :options="dataZoomMoveOnMouseMoves"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import {
  dataZoomOrients,
  dataZoomZoomOnMouseWheels,
  dataZoomMoveOnMouseMoves,
} from '@/components/common/echart/form-item-options.js';
import echartUtil from '@/components/common/echart/echart-util.js';

export default {
  components: { FormItem },
  props: {
    form: Object,
  },
  data() {
    return {
      dataZoomOrients,
      dataZoomZoomOnMouseWheels,
      dataZoomMoveOnMouseMoves,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initRegister();
  },
  methods: {
    initRegister() {
      echartUtil.register('echart.dataZoom.inside', this.form, this);
    },
  },
};
</script>
<style lang="less" scoped></style>
